/**
 * jQuery Image Gallery - CSS for blogger
 * 
 * @name jq-ig.js
 * @author Watchara Sriswasdi - http://www.eakkew.com/
 * @version 1.0
 * @copyright (c) 2011 eakkew(www.eakkew.com)
 * @Visit http://jq-ig.googlecode.com/ for more informations, and duscussions about this plugin
 */
 
#image-gallery {
  width:580px;
  height:400px;
}

#albums-container {
  float:left;
  width:150px;
  height:100%;
  border-right:1px solid #DDDDDD;
  overflow-y:auto;
  font-size: 12px;
  line-height: 22px;
}
#albums-container .jqig-album{
  background: none repeat scroll 0 0 #FFFFFF;
  color:#AAAAAA;
  border:solid 1px #DDDDDD;
  margin:2px 2px;
  padding:2px 6px;
  cursor:pointer;
}
#albums-container .jqig-album:hover{
  background: none repeat scroll 0 0 #0063DC;
  border:solid 1px #FFFFFF;
  color: #FFFFFF;
}
#albums-container .jqig-selected-album{
  border:solid 1px #DDDDDD;
  color:#0000;
  margin:2px 2px;
  padding:2px 6px;
  font-weight:bold;
}

#gallery {
  margin-left:150px;
  border:solid 1px #DDDDDD;
}
.gallery-images-wrapper { width: 100%; height: 100%; overflow: auto;}
.vertical-scroll-bar-wrapper{ float: right; height: 100%; width: 12px;}
.vertical-scroll-bar { position:relative; height:100%; margin-right:2px; }
.vertical-scroll-bar .ui-slider-handle{ width:8px; height:10px; background-color:darkgray; display:block; position:absolute; border:3; -moz-border-radius: 3px; border-radius: 3px;}
.vertical-scroll-bar a {cursor: default;}
.scroll-content{
  position: relative ;
  top:0; left:0;
  margin-left:15px; margin-right: 12px;
}
.image-wrapper{
	float:left;
  margin: 6px 6px;
}
.img img{
	border:1px solid #fff;
}
.img .mask{
	background-color: rgb(255, 255, 255);
	position: absolute;
	opacity:0.25;
	cursor:pointer;
  z-index: 10;
}
.image-wrapper:hover .mask{
	opacity:0;
}
.image-wrapper a{ text-decoration: none;}
.image-wrapper .image-caption{
  color:#000;
  font-size: 12px;
  line-height: 22px;
  padding-top: 0px;
  white-space:nowrap; 
  width:100%; 
	overflow: hidden;
	text-overflow: ellipsis;
  -o-text-overflow: ellipsis;  
  -ms-text-overflow: ellipsis;
}

.paginator{
  font-size: 12px;
  line-height: 22px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 6px;
  text-align:center
}
.bottom{
  padding-bottom: 6px;
}
.paginator a, .paginator .selected-page, 
.paginator .next, .paginator .previous, 
.paginator .start-page, .paginator .end-page{
  background: none repeat scroll 0 0 #FFFFFF;
  border:solid 1px #DDDDDD;
  margin-right:2px;
  padding:2px 6px;
  cursor:pointer;
  text-decoration: none;
}
.paginator a:hover{
  background: none repeat scroll 0 0 #0063DC;
  border:solid 1px #FFFFFF;
  color: #FFFFFF;
}
.paginator .selected-page{
  border:solid 1px #DDDDDD;
  color:#FF0084;
  padding:2px 6px;
  font-weight:bold;
}
.paginator .start-page{
    border: 1px solid #EEEEEE;
    color: #BBBBBB;
    margin-right: 20px;
    cursor:default;
}
.paginator .end-page{
    border: 1px solid #EEEEEE;
    color: #BBBBBB;
    margin-left: 20px;
    cursor:default;
}
.paginator .next{
  border: 1px solid #EEEEEE;
  margin-left: 20px;
}
.paginator .previous{
  border: 1px solid #EEEEEE;
  margin-right: 20px;
}
.paginator .more{
    background: none repeat scroll 0 0 #FFFFFF;
    color: #AAAAAA;
    padding: 2px 6px;
}